<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>班级对比</title>
<link href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<script src="{{URL::asset('js/jquery.min.js')}}"></script>
</head>
<body>
<div id="main">
<el-row :gutter="15">
<el-col :md="18">
	<el-card class="el-card-box">
		<div slot="header" class="el-card-header">
			<h2>对比列表</h2>
			<el-button type="primary" size="small" @click="to">添加</el-button>
		</div>
		<div class="el-card-body">
			<el-table :data="tableData" size="small" border :show-header="false" v-loading="loading" :fit='false'>
				<el-table-column align="right" prop="title" width="130"></el-table-column>
				<el-table-column v-for="(id,col_index) in ids_arr" align="center">
					<template slot-scope="scope">
						<el-button v-if="scope.row[0] == 'btn'"
							type="danger" @click="removeColumn(id)"
							size="mini" circle plain icon="el-icon-close">
						</el-button>
						<el-popover v-else-if="scope.row[0].btn == 'lesson'" placement="bottom-start" trigger="click" >
							<el-button  type="info" slot="reference"size="mini" plain>
    							展开
    						</el-button>
							<li v-for="item in scope.row[col_index].lesson">
								@{{item.crouse_name}} - @{{item.teacher}}
							</li>
						</el-popover>
						<span v-else>
							@{{scope.row[col_index]}}
						</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</el-card>
<el-col>
</el-row>
</div>
</body>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		intoIds:"{{$ids}}",
		ids:"{{$ids}}",
		ids_arr:[],
		loading:true,
		tableData:[]
	},
	mounted:function() {
		this.init();
	},
	methods:{
		init() {
			this.ids_arr = this.ids.split(",");
			this.loading = true;
			var param = {
				ids:this.ids
			}
			$.get('/admin/report_dashboard/contrast/mktable',param,function(res) {
				main.loading = false;
				if(res.code == 1){
					main.tableData = res.data;
				}
			});
		},
		removeColumn(id) {
			this.tableData = [];
			for(i in this.ids_arr){
				if(id == this.ids_arr[i]){
					this.ids_arr.splice(i,1);
					break;
				}
			}
			this.ids = this.ids_arr.join(",");
			this.init();
		},
		to() {
			window.location.href="/admin/report_dashboard/track/ids/"+this.intoIds;
		},
	}
})
</script>
</html>
